import { TinyEmitter } from 'tiny-emitter'
import './styles/main.css'
import store from './store'
import { inject, App } from 'vue'
import { LocalLayoutStore } from './types'
import * as ElIcons from '@element-plus/icons'

function getComponentName(key: string) {
  if (!key) {
    return ''
  }
  const paths = key.split('/')
  const name = paths
    .filter((it) => !!it && it !== '.')
    .reverse()
    .find((it) => it !== 'index.vue' && it !== 'index.ts' && it !== 'index.js')
    ?.replace('.vue', '')
  return name || ''
}

export function registerComponents(app: App) {
  const components = require.context('./', true, /\.vue$/)
  components.keys().forEach((it) => {
    const component = components(it)
    app.component(
      component.default.name || getComponentName(it),
      component.default
    )
  })
}

export function registerIcons(app: App) {
  Object.keys(ElIcons).forEach((it: string) => {
    app.component(it + 'Icon', (ElIcons as any)[it])
  })
}

const key = Symbol('layout_store')
export const emitKey = Symbol('tiny_emit')

function install(Vue: App, options: any) {
  registerIcons(Vue)
  registerComponents(Vue)
  delete options.registerElement
  store.start(options)
  Vue.config.globalProperties.$isMobile = navigator.userAgent.match(
    /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
  )
  Vue.config.globalProperties.$isAndroid =
    navigator.userAgent.indexOf('Android') > -1 ||
    navigator.userAgent.indexOf('Adr') > -1
  Vue.provide(key, store)
  Vue.provide(emitKey, new TinyEmitter())
}

export function useLayoutStore() {
  return inject<LocalLayoutStore>(key, store as LocalLayoutStore)
}

export { default as Layout } from './Layout.vue'

export { mapTwoLevelRouter } from './utils'

export default {
  state: store.state,
  initPermissionRoute: store.initPermissionRoute,
  setUserInfo: store.setUserInfo,
  reset: store.reset,
  isEmptyPermissionRoute: store.isEmptyPermissionRoute,
  install,
}
